<template>
  <view style="background-color: #ffffff; border-radius: 16rpx; padding: 20rpx; margin-top: 20rpx; display: flex; justify-content: space-between; align-items: center">
    <view style="width: calc(100% - 210rpx)">
      <view style="font-size: 32rpx">
        {{ formData.merName }}
      </view>
      <!-- <view style="font-size: 24rpx; color: #999999">
        {{ formData.businessTime }}
      </view> -->
      <view style="margin-top: 10rpx; font-size: 24rpx; color: #999999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
        {{ formData.merAddress }}
      </view>
    </view>
    <view style="display: flex; justify-content: flex-end; align-items: center">
      <view style="margin-left: 20rpx; display: flex; flex-direction: column; align-items: center" @click="makeCall">
        <u-icon size="40" name="phone" />
        <p style="font-size: 24rpx; color: #333333">电话</p>
      </view>
      <!-- <view>
        <u-icon size="32" name="map" />
        <p style="font-size: 24rpx; color: #333333">导航</p>
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    makeCall() {
      uni.makePhoneCall({
        phoneNumber: this.formData.merPhone,
      });
    },
  },
};
</script>

<style scoped>
/* 如果还需要额外的样式可以在这里定义 */
</style>
